<template>
    <view class="content">
        <view>
            <u-swiper :list="list2" keyName="image" showTitle height="200" :autoplay="false" circular></u-swiper>
        </view>
        <view style="margin-top: 50rpx;">
            <u-grid :border="false" @click="click" col="2">
                <u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
                    效果：
                    <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
                    <text class="grid-text">{{ baseListItem.title }}</text>
                </u-grid-item>
            </u-grid>
            <u-toast ref="uToast" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list2: [{
                        image: "http://t2zaocgs5.hn-bkt.clouddn.com/one.jpg",
                        title: "昨夜星辰昨夜风，画楼西畔桂堂东",
                    },
                    {
                        image: "http://t2zaocgs5.hn-bkt.clouddn.com/two.jpg",
                        title: "身无彩凤双飞翼，心有灵犀一点通",
                    }
                ],
                baseList: [{
                        name: 'photo',
                        title: '图片'
                    },
                    {
                        name: 'lock',
                        title: '锁头'
                    },
                    {
                        name: 'star',
                        title: '星星'
                    },
                ]
            }
        },
        methods: {
            click(name) {
                this.$refs.uToast.success(`点击了第${name}个`)
            }
        }
    }
</script>

<style>
.grid-text {
    margin-left: 10rpx;
    font-size: 28rpx;
}
</style>
